<template>
  <div class="box">
    <div class="title">
      <h3>周末出游</h3>
      <p>推荐超完美套餐</p>
    </div>
    <swiper :options="swiperOption" >
      <swiper-slide v-for="item of listWeek" :key="item.id">
        <figure>
          <img :src="item.imgUrl" alt="">
          <h4>{{item.desc}}</h4>
          <p>{{item.detail}}</p>
        </figure>
      </swiper-slide>
    </swiper>
  </div>

</template>

<script>
  export default {
    props:[
      "listWeek"
    ],
    name: "homeWeek",
    data() {
      return {
        swiperOption: {
          // pagination: '.swiper-pagination',
          // loop: true
          freeMode:true,
          spaceBetween:20,
          slidesPerView:3
        }

      }
    }
  }
</script>

<style lang="stylus" scoped>
  p
    color: #aaa
    font-size: 0.2rem

  .box
    padding-left: 0.05rem
    padding-right 0.05rem
    overflow: hidden
    height: 0
    padding-bottom: 56%
    border-bottom: 0.1rem #efefef solid

    .title
      overflow: hidden
      height: 0
      padding-bottom: 14%
      text-align: center
      h3
        margin: 0.2rem 0.3rem
        font-weight bolder

    figure
      padding-left: 0.05rem
      padding-right 0.05rem
      padding-top 0.05rem
      border: 1px solid #cfcfcf
      overflow: hidden
      height: 2.6rem
      text-align: center
      font-size :0.2rem
      line-height :0.2rem

      img
        width: 100%
      h4
        font-weight bolder
        margin: 0.2rem


</style>
